<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="EliteCRM, WebChat" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="WebChat" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #l-map {
            height: 100%;
            width: 78%;
            float: left;
            border-right: 2px solid #bcbcbc;
        }

        #r-result {
            height: 100%;
            width: 20%;
            float: left;
        }
    </style>
    <script charset="utf-8" src="//map.qq.com/api/js?v=2.exp&key=G5JBZ-OVKR3-VTT3N-YPW3V-WZ7AJ-7WFYD"></script>
    <script type="text/javascript" src="js/jquery/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        function getparafromurl() {
            var url, pos, parastr, para = {};
            url = window.location.href;
            pos = url.indexOf("?")
            parastr = url.substring(pos + 1);
            var paraArr = parastr.split("&");
            for (var i = 0; i < paraArr.length; i++) {
                var paraOne = paraArr[i];
                para[paraOne.substring(0, paraOne.indexOf("="))] = paraOne.substring(paraOne.indexOf("=") + 1, paraOne.length);
            }
            return para;
        }

        $().ready(function () {
            var marker = null;
            var params = getparafromurl();
            var latitude = params.latitude;
            var longitude = params.longitude;
            var label = params.label;
            var center = new qq.maps.LatLng(latitude, longitude);
            console.log(center);
            map = new qq.maps.Map(document.getElementById('allmap'), {
                center: center,
                zoom: 13
            });
            //添加到提示窗
            var info = new qq.maps.InfoWindow({
                map: map
            });
            //调用城市服务信息
            new qq.maps.CityService({
                complete: function (results) {
                    map.setCenter(results.detail.latLng);
                    if (marker != null) {
                        marker.setMap(null);
                    }
                    //设置marker标记
                    marker = new qq.maps.Marker({
                        map: map,
                        position: results.detail.latLng
                    });
                    //获取标记的点击事件
                    qq.maps.event.addListener(marker, 'click', function () {
                        info.open();
                        info.setContent('<div style="text-align:center;white-space:nowrap;' +
                                'margin:10px;">' + decodeURIComponent(label) + '</div>');
                        info.setPosition(center);
                    });
                }
            }).searchCityByLatLng(center);
        });
    </script>
    <title>腾讯地图</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>